<template lang="html">
    <panel :title='title'>
      <div class="top">
        <div class="left_list">
          <el-radio-group v-model="countType" size='mini' @change = "change_radio">
            <el-radio-button label="嫌疑人数" ></el-radio-button>
            <el-radio-button label="刑拘数" ></el-radio-button>
            <el-radio-button label="逮捕数"></el-radio-button>
          </el-radio-group >
        </div>
          <ul class="right_list clearfix" v-if='hasDatePick'>
            <li :class="{active:activeClass==='today'}" @click="rankClick('today')">昨天</li>
            <li :class="{active:activeClass==='week'}" @click="rankClick('week')">近7天</li>
            <li :class="{active:activeClass==='month'}" @click="rankClick('month')">近30天</li>
          </ul>
      </div>
      <div class="table">
        <el-table
          :data='tableData'
          style='width:94%;margin: 0 auto;font-size:12px;'
        >
        <el-table-column
          label='排名'
          type='index'
          width='50'
        ></el-table-column>
        <el-table-column
          :label='typeLabel'
          prop='type'
          width='110'
        ></el-table-column>
        <el-table-column
          label='占比'
        >
          <template slot-scope="scope">
            <el-progress
              :percentage="scope.row.percent"
              style='font-size:12px;'
              :stroke-width='8'
              ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label='周环比'
          width='70'
        >
        <template slot-scope="scope">
          <div class="ratio_num" :class='[scope.row.ratio >= 0 ? "up":"down"]'>
            {{String(scope.row.ratio).replace(/-/,'')}}
          </div>
        </template>
        </el-table-column>
        </el-table>
      </div>
    </panel>
</template>

<script>
import Panel from '../chartPanel.vue'
export default {
  components : {
    Panel,
  },
  props : {
    typeLabel : {
      type : String,
    },
    data : {
      type : Array,
    },
    rankingData:{
    	type :Array
    },
    title : String,
    hasDatePick : {
      type : Boolean,
      default : true,
    }
  },
  data(){
    return {
      countType : '',
      tableDataArr:[],
      tableData : [],
      activeClass:'today',
    }
  },
  methods:{
  	change_radio(val){
  		this.tableData =this.tableDataArr[val];
  	},
  	rankClick(val){
  		this.activeClass=val;
  		this.$emit('callBackRan',val);
  	}
  },
  watch:{
  	rankingData(val){
  		this.tableDataArr['嫌疑人数']=val['嫌疑人数'];
  		this.tableDataArr['逮捕数']=val['逮捕数'];
  		this.tableDataArr['刑拘数']=val['刑拘数'];
  		this.tableData =this.tableDataArr['嫌疑人数'];
  	}
  }
}
</script>

<style lang="scss" scoped>
  .top {
    width: 90%;
    margin: 0 auto;
    margin-top: 16px;
    .left_list{
      display: inline-block;
    }
    ul.right_list {
      display: inline-block;
      font-size: 12px;
      vertical-align: middle;
      margin-left: 14px;
      li {
        float: left;
        margin-right: 8px;
        cursor:pointer;
      }
      li.active {
        color : rgb(59, 152, 250)
      }
    }
  }
  .table {
    width: 100%;
    .ratio_num {

    }
    .up {
      color: green;
      &:before {
        display: block;
        content: ' ';
        width: 0px;
        height: 0px;
        border: 4px solid transparent;
        border-bottom: 6px solid green;
        position: absolute;
        margin-top: 4px;
        margin-left: 26px;
      }
    }
    .down {
      color: red;
      &:before {
        display: block;
        content: ' ';
        width: 0px;
        height: 0px;
        border: 4px solid transparent;
        border-top: 6px solid red;
        position: absolute;
        margin-top: 8px;
        margin-left: 26px;
      }
    }
  }
</style>
